<!--
 * @Description: 
 * @Date: 2023-03-06 16:35:14
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 11:24:47
-->
<template>
	<div class="base-crumb">
		<el-breadcrumb class="left" separator=">">
			<el-breadcrumb-item :to="{ path: HOME_PATH }">
				<IEpHomeFilled />
			</el-breadcrumb-item>
			<el-breadcrumb-item :to="breakPoint != 'xs' && { path: nav.path }">{{ nav.name }}</el-breadcrumb-item>
			<el-breadcrumb-item>{{ nav.children[categoryIndex].children.find(item => item.key == activeKey).name }}</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="right">
			<span
				@click="$emits('update:activeKey', item.key)"
				:class="['nav', { active: activeKey == item.key }]"
				v-for="(item, index) in nav.children[categoryIndex].children"
				:key="index"
			>
				{{ item.name }}
			</span>
		</div>
	</div>
</template>
<script setup lang="ts" name="BaseCrumb">
import { HOME_PATH } from "@/enums/routerEnum";
import { useBaseStore } from "@/store/base";
import { INav } from "@/store/interface/base";

interface BaseCrumbProps {
	nav: INav;
	categoryIndex: number;
	activeKey: string;
}
const { breakPoint } = storeToRefs(useBaseStore());

defineProps<BaseCrumbProps>();
const $emits = defineEmits<(e: "update:activeKey", value: string) => void>();
</script>
<style lang="scss" scoped>
.base-crumb {
	display: flex;
	align-items: center;
	padding: 30px 320px;
	border-bottom: 1px solid #dedede;
	.left {
		flex: 1;
	}
	.right {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		font-size: 20px;
		span {
			padding: 0 20px;
			cursor: pointer;
			&:not(:last-child) {
				border-right: 1px solid #bbbbbb;
			}
			&.active,
			&:hover {
				color: #8a1313;
			}
		}
	}
}
:deep(.el-breadcrumb) {
	font-size: 18px !important;
	color: #333333;
	.el-breadcrumb__inner {
		color: #8a1313;
	}
	.is-link {
		color: #333333;
	}
}

@media all and (max-width: 750px) {
	.base-crumb {
		padding: 16px;
		.right {
			font-size: 10px;
			span {
				padding: 0 8px;
			}
		}
	}
	:deep(.el-breadcrumb) {
		font-size: 10px !important;
	}
}
</style>
